<template>
  <f7-echarts
    :options="echartOption"
    theme="light"
  ></f7-echarts>
</template>
<script>
export default {
  props: {
    params: {
      type: Object,
      default: {}
    },
    value: {
      type: Object
    }
  },
  computed: {
    echartOption() {
      let result = {
        title: {
          x: "center",
          text: this.value.text,
          subtext: "数据来源：" + this.value.source
        },
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            let ret = params[0].name + "<br/>";
            for (let i = 0; i < params.length; i++) {
              if (params[i].seriesType == "line") {
                ret =
                  ret +
                  params[i].marker +
                  params[i].seriesName +
                  "：" +
                  params[i].value +
                  "%<br/>";
              }
              if (params[i].seriesType == "bar") {
                ret =
                  ret +
                  params[i].marker +
                  params[i].seriesName +
                  "：" +
                  params[i].value +
                  "亿元<br/>";
              }
            }
            return ret;
          }
        },
        legend: {
          bottom: "bottom",
          data: this.$util.map(this.params.legend, r => {
            return r.name;
          })
        },
        xAxis: [
          {
            type: "category",
            data: this.params.xAxis.category,
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: this.$util.map(this.params.yAxis.value, r => {
          return {
            type: "value",
            name: r,
            axisLabel: {
              formatter: "{value}"
            }
          };
        }),
        series: this.$util.map(this.params.legend, r => {
          return {
            name: r.name,
            type: r.type,
            yAxisIndex: r.yAxisIndex,
            data: this.$util.map(this.value.parameters.data, v => {
              return v[r.valueKey];
            })
          };
        })
      };
      return result;
    }
  },
  methods: {},
  mounted() {
    const app = this.$f7;
  }
};
</script>
